
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微圈统计图</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/echarts/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            white-space:nowrap;
        }
        body{
            background-color: #F3F5F7;
        }
        .layui-col-md11{
            min-width:1207px;
        }
        .headerCenter{
            margin-top: 10px;
            margin-left: 20px;
            width: 100%;
        }
        .canvas{
            margin-left: 20px;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .layui-form-item .layui-input-inline{
            margin-right: -10px;
        }

        div#rMenu {
            position: fixed;
            visibility:hidden;
            top:0;
            text-align: left;
            padding:4px;
            width: 100px;
            height: 90px;
        }
        div#rMenu a{
            padding: 5px 30px 5px 30px;
            background-color:#cad4e6;
            /*vertical-align:middle;*/
        }
        .tabBorder{
            width: 100%;
        }
        .typeface{
            font-weight:bold;
            text-align:center;
        }
        #context{
            width: 100%;
            height: 350px;
        }
        .btn{
            width: 630px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="layui-row" >
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                微圈统计图
                <div class="btnRight" style="margin-bottom: 10px">
                    <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                        刷新
                    </button>
                    <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-return"></i>
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="btn">
    <button onclick="searchDianZan()" type="button" class="layui-btn">
        <i class="layui-icon layui-icon-praise"></i>
        点赞数量排行
    </button>
    <button onclick="searchShouCang()" type="button" class="layui-btn">
        <i class="layui-icon layui-icon-star"></i>
        收藏数量排行
    </button>
    <button onclick="searchLiuLan()" type="button" class="layui-btn">
        <i class="layui-icon layui-icon-read"></i>
        浏览数量排行
    </button>
    <button onclick="searchFenXiang()" type="button" class="layui-btn">
        <i class="layui-icon layui-icon-share"></i>
        分享数量排行
    </button>
</div>
<div class="layui-row">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe613;</i>
                微圈统计列表
            </div>
            <div class="layui-card-body">
                <table border frame=box class="tabBorder">
                    <thead>
                    <tr id="leixing">
                        <!--<th>微圈类型</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="typeface" id="cishu">
                        <!--<td>点赞次数2</td>-->
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row ">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe629;</i>
                微圈统计图表
            </div>
        </div>
    </div>
</div>
<div class="layui-row canvas">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <div id="context">

        </div>
    </div>
</div>
</body>
<script>
    var $;
    var layer;
    var chartData;
    var data = null;
    var dianzan = [];
    var dianzanName = [];
    var liulan = [];
    var shoucang = [];
    var fenxiang = [];

    $(document).click(function(){//点击iframe页面关闭选项卡菜单
        $(".rightmenu",window.parent.document).hide();
    });

    layui.use(['jquery','layer'],function() {
        $ = layui.jquery;
        layer = layui.layer;

        $.ajax({
            url:'/microcircle/getStatistics',
            type: "post",
            dataType:'json',
            async: false,
            data: {},
            success:function (item) {
                data = item.data;
                var nu = 0;
                for (var i = 0; i < data.length; i++) {
                    nu = nu + 1;
                    if (nu <= 4){
                        dianzan.push(data[i].acticleLike);
                        dianzanName.push(data[i].artcleCategroyName);
                        shoucang.push(data[i].collectionNum);
                        liulan.push(data[i].acticleHits);
                        fenxiang.push(data[i].acticleShare);
                    }
                }

                var n = 0;
                data.sort(function (a,b) {
                    return  b.acticleLike - a.acticleLike;
                });

                $("#leixing").append("<th>微圈类型</th>");
                $("#cishu").append("<td>点赞数量</td>");
                for (var i = 0; i < data.length; i++) {
                    n = n + 1;
                    if (n <= 4) {
                        $("#leixing").append("<th>" + data[i].artcleCategroyName + "</th>");
                        $("#cishu").append("<td>" + data[i].acticleLike + "</td>");
                    }
                }
            }
        });

        chart(dianzanName,dianzan,shoucang,liulan,fenxiang);
    });

    //点赞排行
    function searchDianZan() {
        var n = 0;
        data.sort(function (a,b) {
            return  b.acticleLike - a.acticleLike;
        });
        $("#leixing th").remove();
        $("#cishu td").remove();
        $("#leixing").append("<th>微圈类型</th>");
        $("#cishu").append("<td>点赞数量</td>");
        for (var i = 0; i < data.length; i++) {
            n = n + 1;
            if (n <= 4) {
                $("#leixing").append("<th>" + data[i].artcleCategroyName + "</th>");
                $("#cishu").append("<td>" + data[i].acticleLike + "</td>");
            }
        }
        chart(dianzanName,dianzan,'','','');
    }

    //收藏排行
    function searchShouCang() {
        var n = 0;
        data.sort(function (a,b) {
            return  b.collectionNum - a.collectionNum;
        });
        $("#leixing th").remove();
        $("#cishu td").remove();
        $("#leixing").append("<th>微圈类型</th>");
        $("#cishu").append("<td>收藏数量</td>");
        for (var i = 0; i < data.length; i++) {
            n = n + 1;
            if (n <= 4) {
                $("#leixing").append("<th>" + data[i].artcleCategroyName + "</th>");
                $("#cishu").append("<td>" + data[i].collectionNum + "</td>");
            }
        }
        chart(dianzanName,'',shoucang,'','');
    }

    //浏览量排行
    function searchLiuLan(){
        var n = 0;
        data.sort(function (a,b) {
            return  b.acticleHits - a.acticleHits;
        });
        $("#leixing th").remove();
        $("#cishu td").remove();
        $("#leixing").append("<th>微圈类型</th>");
        $("#cishu").append("<td>浏览数量</td>");
        for (var i = 0; i < data.length; i++) {
            n = n + 1;
            if (n <= 4) {
                $("#leixing").append("<th>" + data[i].artcleCategroyName + "</th>");
                $("#cishu").append("<td>" + data[i].acticleHits + "</td>");
            }
        }
        chart(dianzanName,'','',liulan,'');
    }

    //分享数量排行
    function searchFenXiang() {
        var n = 0;
        data.sort(function (a,b) {
            return  b.acticleShare - a.acticleShare;
        });
        $("#leixing th").remove();
        $("#cishu td").remove();
        $("#leixing").append("<th>微圈类型</th>");
        $("#cishu").append("<td>分享数量</td>");
        for (var i = 0; i < data.length; i++) {
            n = n + 1;
            if (n <= 4) {
                $("#leixing").append("<th>" + data[i].artcleCategroyName + "</th>");
                $("#cishu").append("<td>" + data[i].acticleShare + "</td>");
            }
        }
        chart(dianzanName,'','','',fenxiang);
    }
    chart(dianzanName,dianzan,shoucang,liulan,fenxiang);
    function chart(dianzanName,dianzan,shoucang,liulan,fenxiang) {
        var myChart = echarts.init(document.getElementById('context'));
        option = {
            title: {
                text: '微圈统计图',
                subtext: '思云产品'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['微圈点赞统计', '微圈收藏统计','微圈浏览统计','微圈分享统计']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: dianzanName
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '微圈点赞统计',
                    type: 'bar',
                    data: dianzan,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '微圈收藏统计',
                    type: 'bar',
                    data: shoucang,
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '微圈浏览统计',
                    type: 'bar',
                    data: liulan,
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '微圈分享统计',
                    type: 'bar',
                    data: fenxiang,
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                }
            ]
        };
        myChart.setOption(option);
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
            }
        },200);
    }

    //刷新
    refresh = function refresh() {
        window.location.reload();
    }

    //返回首页
    backOff = function backOff(){
        parent.jumpSystemHome();
    }

</script>
</html>